<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="/js/axios.js"></script>
		<script src="/js/vue.js"></script>
		<script src="/js/element-ui/index.js"></script>
		<link rel="stylesheet" type="text/css" href="/js/element-ui/index.css" />
	</head>
	<body>
		<div id="box">
			<el-container>
				<el-header id="head">
					<div th:include="~{common/nav-head::head}"></div>
				</el-header>
				<el-container>
					<el-aside width="200px">
						<div id="title">
							<span>沅沅宝贝天天开心</span>
						</div>
						<img src="/image/kuromi&baku.jpg" style="width: 200px;height: 200px;" />
						<div id="title2">
							<span>Tag</span>
						</div>
						<div style="text-align: center;background-color: lightskyblue;">
							<br />
							<p id="type" @click="findAll()">All</p>
							<p id="type" v-for="item in blogTypes" @click="findByType(item.id)">{{item.name}}</p>
							<br />
						</div>
					</el-aside>
					<el-main>
						<div id="title3">
							<span style="margin-left: 18px;">AllBlog</span>
							<span style="margin-left: 55vw;">
								<button>
									<a style="text-decoration: none;" href="/api/cons/blog/go2PublishBlog">PublishBlog</a>
								</button>
							</span>
						</div>
						<div v-for="item in blogs">
							<div id="title4">
								<span style="margin-left: 2px;">{{item.title}}</span>
							</div>
							<div style="margin-top: 15px;">
								<span style="color: black;margin-left: 15px; font-size: 13px;">
									摘要:{{item.digest}}
								</span>&nbsp;
								<span style="text-decoration: underline;color: steelblue;cursor: pointer;
								 font-size: 13px;" @click="toReadAll(item.id,item.contentId)">
									阅读全文
								</span>
								<br />
								<div style="display: flex;">
									<div style="margin-top: 20px;">
										<span style="font-size: 11px;margin-left: 3vw;">{{item.pageviews}}阅读</span>&emsp;
										<span style="font-size: 11px;">{{item.likes}}点赞</span>&emsp;
										<span style="font-size: 11px;">{{item.favouriteSum}}收藏</span>
									</div>
									<div style="margin-left: 42vw;"></div>
									<span style="color: black;font-size: 10px;margin-left: 2vw;margin-top: 20px;">发表时间:{{item.createTime}}</span>
									<span style="color: black;font-size: 12px;margin-top: 20px;margin-left: 3px;">作者:{{item.nickname}}</span>
								</div>
							</div>
							<hr />
						</div>
					</el-main>
				</el-container>
			</el-container>
		</div>
	</body>
	<script>
		new Vue({
			el: "#box",
			data: {
				blogs: [],
				blogTypes: []
			},
			methods: {
				toReadAll(blogId,contentId) {
					sessionStorage.setItem("blogId",blogId)
					sessionStorage.setItem("contentId", contentId)	
					window.location.href = "/api/public/blog/go2ReadAll"
				},
				findByType(typeId){
					let _this = this
					axios.get("/api/public/blog/findByType/"+typeId)
						.then(function(response) {
							let data = response.data.data
							if(data.length>0){
								_this.blogs = response.data.data
							}else{
								_this.$message({
									message:'当前区域暂无博客,烦请移步其他区域',
									showClose:'true',
									type:'error'
								})
							}
						})
				},
				findAll(){
					let _this = this
					axios.get("/api/public/blog/findAll")
						.then(function(response) {
							_this.blogs = response.data.data
						})
				}
			},
			mounted() {
				let _this = this
				axios.get("/api/public/blog/findAll")
					.then(function(response) {
						_this.blogs = response.data.data
					})
				axios.get("/api/public/blogType/findAll")
					.then(function(response) {
						_this.blogTypes = response.data.data
					})

			}
		})
	</script>
	<style>
		#head {
			line-height: 90px;
			margin-bottom: 1vw;
			margin-left: -0.7vw;
		}

		#type {
			font-size: 13px;
			cursor: pointer;
		}


		#title {
			background-color: #DD6161;
			height: 25px;
			line-height: 25px;
			text-align: center;
			color: white;
			font-size: 13px;
		}

		#title2 {
			background-color: #F78989;
			height: 25px;
			line-height: 25px;
			text-align: center;
			color: white;
			font-size: 13px;
		}

		#title3 {
			background-color: #DD6161;
			height: 25px;
			line-height: 25px;
			color: white;
			font-size: 13px;
			margin-top: -15px;
			margin-left: -15px;
		}

		#title4 {
			background-color: #B3D8FF;
			height: 25px;
			line-height: 25px;
			color: white;
			font-size: 13px;
			margin-top: 1vw;
			margin-left: 2px;
		}

		.el-aside {
			text-align: center;
			margin-top: 5px;
		}

		body>.el-container {
			margin-bottom: 40px;
		
	</style>
</html>